import AIConversationPanel from "./components/ConversationPanel.tsx";
import {ConfigProvider, theme} from "antd";
import {Divider} from "@douyinfe/semi-ui";
import Conversation from "./components/Conversation.tsx";
import {useEffect, useState} from "react";
import "./AIChat.css"
import AutoHeight from "../../components/AutoHeight.tsx";


// 定义 AIChat 组件
const AIChat = (props: { isDarkMode: boolean, setCollapse: () => void }) => {
    //设置聊天区域高度记录
    const [height, setHeight] = useState(0);
    const [change, startChange] = useState(false);
    const changeCall = () => {
        startChange(!change);
    }
    useEffect(() => {
        //收缩导航栏，显得不那么拥挤
        props.setCollapse();
    }, [height, props])
    //当对话被选中
    return (
        <ConfigProvider theme={props.isDarkMode ? {algorithm: theme.darkAlgorithm} : {}}>
            <AutoHeight style={{display: "flex", flexDirection: "row"}} setHeight={setHeight}>
                <AIConversationPanel style={{width: 216}} height={height} changeCall={changeCall}/>
                <Divider layout="vertical" style={{height: "100%"}}/>
                <Conversation style={{height: height, flex: 1, margin: "0 75px"}} change={change}/>
            </AutoHeight>
        </ConfigProvider>
    );
}
export default AIChat;